<template>
  <view class="main">
    <u-form labelPosition="left" :model="formData" label-width="88" ref="form">
      <view class="commonBox">
        <u-form-item label="头像" prop="aliName" borderBottom ref="item1">
          <view class="avatar">
            <view class="sctx">
              <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <image class="img" :src="formData.avatar" mode="aspectFill"></image>
              </button>
            </view>
          </view>
        </u-form-item>
        <u-form-item label="姓名" prop="nickName" borderBottom ref="item1">
          <u-input v-model="formData.nickName" type="nickname" border="none" placeholder="请输入姓名" input-align="right"></u-input>
        </u-form-item>
      </view>
    </u-form>
    <view class="buttomBox">
      <u-button @click="submit" shape="circle" text="提交" color="#1676fd"></u-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { userEdit } from "@/api/my";
import { BASE_UPLOADURL } from "@/utils/request";
import { onMounted, ref } from "vue";
const formData = ref({
  nickName: "",
  avatar: "",
});
onMounted(() => {
  formData.value = uni.getStorageSync("userInfo");
});
const onChooseAvatar = (e: any) => {
  const { avatarUrl } = e.detail;
  console.log("微信图像", avatarUrl);
  uni.showLoading({
    title: "加载中",
  });
  uni.uploadFile({
    url: BASE_UPLOADURL,
    filePath: avatarUrl,
    header: {
      Authorization: uni.getStorageSync("token"),
    },
    name: "file",
    success: async (uploadFileRes) => {
      console.log(uploadFileRes);

      formData.value.avatar = JSON.parse(uploadFileRes.data).data.url;
    },
    complete() {
      //隐藏loading
      uni.hideLoading();
    },
  });
};
const submit = async () => {
  await userEdit(formData.value);
  uni.showToast({
    title: "修改成功",
  });
  setTimeout(() => {
    uni.navigateBack();
  }, 300);
};
</script>

<style lang="less" scoped>
.avatar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: salmon;
  }
  .sctx {
    button::after {
      border: none;
    }
    button {
      border-color: #fff !important;
      background: rgba(0, 0, 0, 0) !important;
      height: 110rpx;
    }
  }
}
/deep/.u-input {
  padding: 14rpx 0px !important;
}
/deep/ .u-line {
  border-color: #f7f7f7 !important;
}
/deep/ .u-form-item__body__right__message {
  text-align: right !important;
}
</style>
